<template>
  <div class="box">
    <el-button type="primary" style="padding:8px" icon="el-icon-upload" @click="uploading">图片上传</el-button>
    <!-- 图片上传 -->
    <el-dialog
      title="图片上传"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 上传按钮 -->
      <el-upload
        class="avatar2-uploader"
        action="#"
        :http-request="headUpload"
      >
        <img v-if="driverPhoto" :src="driverPhoto" class="avatar2">
        <i v-else class="el-icon-plus avatar2-uploader-icon" />
      </el-upload>
      <!--  -->
      <span slot="footer" class="dialog-footer">
        <el-button style="padding:10px" @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" style="padding:10px" @click="imgup">确 定</el-button>
      </span>
    </el-dialog>
    <el-table
      :data="tableData"
      border
      style="width: 100%;margin-top:20px"
    >
      <el-table-column
        prop="titleId"
        label="序号"
        width="80"
      />
      <el-table-column
        prop="time"
        label="日期"
        width="180"
      />
      <!-- <el-table-column
        prop="imgPath"
        label="图片路径"
        width="180"
      /> -->
      <el-table-column
        prop="title"
        label="标题"
      />
      <el-table-column prop="" label="编辑" width="100">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            style="padding:5px"
            @click="showRoles(scope.row)"
          >编辑</el-button>
          <!-- <el-button size="mini" type="success" icon="el-icon-check"
            >保存</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑界面 -->
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <!-- 内容 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="序号">
          <el-input v-model="form.titleId" placeholder="请输入内容" :disabled="true" />
        </el-form-item>
        <el-form-item label="日期" style="margin-top:20px">
          <el-date-picker
            v-model="form.time"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <!-- <el-form-item label="图片路径" >
          <el-input v-model="form.imgPath" />
        </el-form-item> -->
        <el-form-item label="标题" style="margin-top:20px">
          <el-input v-model="form.title" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button style="padding:10px" @click="abolish">取 消</el-button>
        <el-button type="primary" style="padding:10px" @click="ascertain()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getmessage, modificationJournalism, headUpload, imgup, upjournallog, upimglog } from '@/api/activityCharge'

export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false, // 编辑显示影藏
      dialogVisible2: false, // 图片上传编辑显示影藏
      form: {
        time: '', // 时间
        title: '', // 标题
        titleId: '' // id
      },
      driverPhoto: '' // 图片地址
    }
  },
  mounted() {
    this.getmessage()
  },
  methods: {
    showRoles(i) {
      console.log(i)
      this.dialogVisible = true
      this.form.time = i.time
      this.form.imgPath = i.imgPath
      this.form.title = i.title
      this.form.titleId = i.titleId
    },
    // 查询新闻资讯
    getmessage() {
      getmessage().then(res => {
        console.log(res)
        this.tableData = res.data
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    ascertain() { // 确定
    //   this.dialogVisible = false
      if (this.form.time === null || this.form.title === '') {
        this.$message.error('输入框内容不能为空')
      } else {
        var time = this.form.time
        var title = this.form.title
        var titleId = this.form.titleId
        var d = new Date(time)
        const date2 = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
        modificationJournalism(date2, title, titleId).then(res => {
          console.log(res)
          this.dialogVisible = false
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getmessage()
          // 修改新闻资讯
          upjournallog().then(res => {
            console.log(res)
          })
        })
      }
    },
    abolish() { // 取消
      this.$confirm('确认关闭？')
        .then((_) => {
          this.dialogVisible = false
        })
        .catch((_) => {})
    },
    // 图片上传按钮
    uploading() {
      this.dialogVisible2 = true
    },
    // 图片上传的方法
    async headUpload(file) {
      var formData = new FormData()
      formData.append('file', file.file)
      const result = await headUpload(formData)
      console.log(result.data)
      this.driverPhoto = result.data
    },
    // 确定上传图片
    imgup() {
      // this.dialogVisible2 = false
      if (this.driverPhoto === '') {
        this.$message.error('请上传图片')
      } else {
        imgup(this.driverPhoto).then(res => {
          console.log(res)
          this.dialogVisible2 = false
          this.$message({
            message: '图片上传成功',
            type: 'success'
          })
          this.getmessage()
          // 修改新闻资讯上传图片
          upimglog().then(res => {
            console.log(res)
          })
        })
      }
    }
  }
}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 90%;
    margin: 0 auto;
    margin-top: 5%;
}
/* 图片上传框样式 */
.avatar2-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}
.avatar2-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar2-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid rgb(220, 223, 230);
  border-radius: 10px;
}
.avatar2 {
  width: 178px;
  height: 178px;
  display: block;
}

</style>